<template>
  <div class="feedback-container">
    <div class="main" :style="{ paddingBottom: `${bottomDistance}px` }">
      <nut-button
        color="linear-gradient(to right, #ff6034, #ee0a24)"
        size="large"
        @click="handleClick"
      >
        提 交
      </nut-button>
    </div>
  </div>
</template>
<script setup lang="ts">
import { onMounted } from "vue";
import Taro from "@tarojs/taro";
import { useTabbarStore } from "../../store";
import { storeToRefs } from "pinia";
import { IconFont } from "@nutui/icons-vue-taro";
import { toRefs } from "vue";

const tabbarStore = useTabbarStore();
const { bottomDistance } = storeToRefs(tabbarStore);
const emit = defineEmits(["clickBack"]);
const props = defineProps({
  text: String,
  phone: String,
});
const { text, phone } = toRefs(props);
onMounted(() => {
  setBottomDistance();
});
const setBottomDistance = () => {
  const systemInfo = Taro.getSystemInfoSync();
  const safeArea: any = systemInfo.safeArea;
  const res = systemInfo.screenHeight - safeArea.bottom;
  console.log(res, safeArea, systemInfo);

  tabbarStore.setBottomDistance(res);
};
const handleClick = () => {
  if (!text.value) {
    Taro.showToast({
      title: "反馈不能为空",
      icon: "error",
    });
    return
  }
  Taro.showToast({
    title: "提交成功,请等待我们与你联系",
    icon: "none",
  });
  emit("clickBack", true);
};
</script>
<style lang="scss">
.feedback-container {
  display: flex;
  flex-direction: column;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  .main {
    height: 120px;
    // background-color: #fff;
    padding: 0 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .nut-button--default {
      border: none !important;
    }
  }
}
</style>
